<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8"/>
    <title>账户</title>
    <meta name="description" content="overview & stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="static/css/ace.min.css"/>
    <link rel="stylesheet" href="static/css/ace-responsive.min.css"/>
    <link rel="stylesheet" href="static/css/ace-skins.min.css"/>
    <script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
    <!--提示框-->
    <script type="text/javascript" src="static/js/jquery.tips.js"></script>
</head>

<script type="text/javascript">
    $(function () {
        top.hangge();
    });

    //保存
    function save() {
        var reg = /^[a-zA-Z0-9#@$!~%^&*]{6,16}$/
        var account = $("#account").val();
        if (account == "") {
            $("#account").tips({
                side: 3,
                msg: '请输入登录账号',
                bg: '#AE81FF',
                time: 2
            });
            $("#account").focus();
            return false;
        }
        if (!reg.test(account)) {
            $("#account").tips({
                side: 3,
                msg: '账号为6~16位字符内',
                bg: '#AE81FF',
                time: 2
            });
            $("#account").focus();
            return false;
        }
        var password = $("#password").val();
        if (password == "") {
            $("#password").tips({
                side: 3,
                msg: '请输入密码',
                bg: '#AE81FF',
                time: 2
            });
            $("#password").focus();
            return false;
        }
        if (!reg.test(password)) {
            $("#password").tips({
                side: 3,
                msg: '密码为6~16位字符内',
                bg: '#AE81FF',
                time: 2
            });
            $("#password").focus();
            return false;
        }
        if ($("#nickname").val() == "") {
            $("#nickname").tips({
                side: 3,
                msg: '请输入昵称',
                bg: '#AE81FF',
                time: 2
            });
            $("#nickname").focus();
            return false;
        }
        if ($("#roleId").val() == "") {
            $("#roleId").tips({
                side: 3,
                msg: '请选择角色',
                bg: '#AE81FF',
                time: 2
            });
            $("#roleId").focus();
            return false;
        }
        if ($("#channelAreaId").val() == "") {
            $("#channelAreaId").tips({
                side: 3,
                msg: '请选择区域',
                bg: '#AE81FF',
                time: 2
            });
            $("#channelAreaId").focus();
            return false;
        }


        $.get("user/checkAccount",
            {"account": account},
            function (data) {
                if (data.code == 200) {
                    $("#menuForm").submit();
                    $("#zhongxin").hide();
                    $("#zhongxin2").show();
                } else {
                    alert(data.msg);
                }
            });
    }

    //展示图片
    function showImg(obj) {
        if ($(obj).context.files) {
            document.getElementById("showAvatar").src = window.URL.createObjectURL($(obj).context.files[0]);
        }
    }

</script>

<body>
<form action="user/add" name="menuForm" id="menuForm" method="post" enctype="multipart/form-data">
    <input type="hidden" name="channelAffiliationId" value="${channelAffiliationId}">
    <input type="hidden" name="unbindNum" value="${unbindNum}"/>
    <input type="hidden" name="type" value="1">
    <div id="zhongxin" class="zhongxin-cla">
        <table>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>登录账号：</span>
                    <input type="text" name="account" id="account" placeholder="登录账号，创建后不可修改" value="" title="账号"/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>密码：</span>
                    <input type="text" name="password" id="password" placeholder="密码" value="" title="密码"/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>昵称：</span>
                    <input type="text" name="nickname" id="nickname" placeholder="昵称" value="" title="昵称"/>
                </td>
            </tr>
            <tr>
                <td>
                    <span>头像：</span>
                    <span>
							<input type="file" name="file" onchange="showImg(this)">
							<img id="showAvatar" src="static/avatars/user.jpg" style="height: 100px;width: 100px">
						</span>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>角色：</span>
                    <select name="roleId" id="roleId" class="input_txt" title="角色">
                        <option value="">请选择角色</option>
                        <c:forEach items="${roles}" var="role">
                            <option value="${role.id}">${role.name}</option>
                        </c:forEach>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>区域：</span>
                    <select name="channelAreaId" id="channelAreaId" class="input_txt"
                            style="vertical-align:top;width: 350px;">
                        <option value="">请选择区域</option>
                        <c:forEach items="${channelAreas}" var="area">
                            <option value="${area.id}">
                                    ${area.name}
                            </option>
                            <c:forEach items="${area.channelAreaList}" var="area2">
                                <option value="${area2.id}">
                                    &emsp;${area2.name}
                                </option>
                                <c:forEach items="${area2.channelAreaList}" var="area3">
                                    <option value="${area3.id}">
                                        &emsp;&emsp;${area3.name}
                                    </option>
                                    <c:forEach items="${area3.channelAreaList}" var="area4">
                                        <option value="${area4.id}">
                                            &emsp;&emsp;&emsp;${area4.name}
                                        </option>
                                    </c:forEach>
                                </c:forEach>
                            </c:forEach>
                        </c:forEach>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>账号状态：</span>
                    <select name="status" id="status" class="input_txt" title="账号状态">
                        <option value="0">启用</option>
                        <option value="1">禁用</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; padding-top: 10px;">
                    <a class="btn btn-mini btn-primary" onclick="save();">保存</a>
                    <a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="zhongxin2" class="center" style="display:none">
        <br/><br/><br/><img src="static/images/jiazai.gif"/><br/>
        <h4 class="lighter block green"></h4>
    </div>
</form>
</body>
</html>